<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow</title>
    <style>
         .one {
            /* overflow属性指定了如果内容溢出一个元素的框时，会发生什么 */
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* 一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分影响布局.
               但是如果有定位的盒子,请慎用overflow:hidden 因为它会隐藏多余的部分 */
            overflow: auto;
            height: 200px;
            width: 200px;
            border: 1px solid pink;
            margin: 100px auto;
         }
    </style>
</head>
<body>
    <div class="one">
        许是午后骤过的暴雨，洗去了入夏来连日的躁热，一掬新凉，夹杂着青草的气息、绿叶的味道、野花的芳香，漂浮在这宁静的夜空，悄然弥漫，沁入本有些浮躁烦闷的胸廓，些些的神清气爽，稍稍的心旷神怡。
    </div>
</body>
</html>